<template>
  <div class="login">
      <video 
        id="myvideo"
        autoplay
        loop
        muted
        playsInline
        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4" 
        class="myvideo">
      </video>
      <div class="login-box" :style="{height:active=='login'?'340px':'480px'}">
          <h3 class="title">欢迎访问我爱我家社区</h3>
          <div class="box">
            <el-tabs v-model="active" >
                <el-tab-pane  label="用户登录" name="login">
                  <LoginCom  :phone="phone" />
                </el-tab-pane>
                <el-tab-pane label="用户注册" name="register">
                  <RegisterCom  @changeactive="changeactive"/>
                </el-tab-pane>
            </el-tabs>
          </div>
      </div>
  </div>
</template>

<script>
// http://47.104.209.44/mp/brkw.mp4
// https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4
import {reactive,toRefs} from "vue"
import LoginCom from "./login.vue"
import RegisterCom from "./register.vue"

export default {
    name:"login",
    components:{
      LoginCom,
      RegisterCom
    },
    setup(){
      const state = reactive({
        active:'login',
        phone:null
      })
      const changeactive = (data)=>{
        state.active = data.active,
        state.phone = data.phone 
      }
      return {
        ...toRefs(state),
        changeactive,

      }
    }
}
</script>


<style lang="scss" >
.login{
  width:100%;
  height:100%;
    .myvideo{
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 0;
    }
    .login-box{
        position: absolute;
        width:390px;
        height:340px;
        // min-height:340px;
        border:1px solid darkkhaki;
        border-radius: 8px;
        padding:15px;
        background: rgba(0, 0, 0, 0.2);
        left:0;
        right:0;
        bottom:0;
        top:0;
        margin:auto;
        .title{
            font-size:26px;
            text-align: center;
            font-weight: 500;
            color:darkorange;
        }
        .box{
            margin-top:10px;
            .el-tabs__nav {
                width:100%;
                .el-tabs__active-bar{
                    background-color: darkorange;
                }
                .el-tabs__item{
                    flex:1;
                    width:50%;
                    text-align: center;
                    color:#fff;
                }
                .is-active{
                    color:darkorange;
                }
            }
            .myform{
                .el-input__icon{
                    color:#fff;
                }
                .el-input__inner{
                    background: transparent;
                    color:#fff;
                }
            }
        }
    }
}
</style>

